<template>
    <div class="nav">
         <van-tabs v-model="active" :border="false" duration="0" background="#d43c33" color="#fff" title-active-color="#fff" title-inactive-color="#f5f5f5">
            <van-tab title="推荐" to="/index"></van-tab>
            <van-tab :title="$t('lang.rank')" to="/rank"></van-tab>
            <van-tab title="歌手" to="/singer"></van-tab>
        </van-tabs> 
        <!-- <router-link tag="div" to="/index" class="item-tab">
            <span></span>
        </router-link>
        <router-link tag="div" to="/rank" class="item-tab">
            <span></span>
        </router-link>
        <router-link tag="div" to="/singer" class="item-tab">
            <span></span>
        </router-link> -->
    </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
export default {
    name:'',
    data(){
        return {
             active: 0
        }
    },
    mounted() {
        setTimeout(()=> {
            this.currentPath()
            console.log(this.$t)
        },200)
    },
    methods:{
        currentPath() {          
            let path = this.$route.fullPath
            if(path == '/index'){
                this.active = 0
            }else if(path == '/rank'){
                this.active = 1
            }else if(path == '/singer'){
                this.active = 2
            }
        },
    },
    components: {
        [Tab.name]:Tab,
        [Tabs.name]:Tabs,
    }
}
</script>

<style scoped lang='less'>
    .nav{
        /deep/ .van-tabs--line{
            .van-tabs__wrap{
                height: 36px;
                .van-tab{
                    line-height: 36px;
                }
            }
             .van-tabs__nav--line{
                padding-bottom: 12px;
            }

        }  
        /deep/ .van-tabs__line{
            z-index: 0;
            width:27px !important;
        } 
    }
</style>
